<meta charset="utf-8">
<!-- <script src="main.js"></script> -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
  [v-cloak] {
      display:none;
  }
  #div1{
      width:100px;
      height: 100px;
      background-color: yellow;
  }

</style>
<body>
    <ul>
        <li>this is 1 li</li>
        <li>this is 2 li</li>
        <li>this is 3 li</li>
        <li>this is 4 li</li>
        <li>this is 5 li</li>
        <li>this is 6 li</li>
        <li>this is 7 li</li>
        <li>this is 8 li</li>

    </ul>
    
    <div class="box"></div>
    <div class="box2"></div>
    <span class="glyphicon glyphicon-trash"></span>

    <div id="app">
        <p v-cloak>{{ msg }}</p>
        <h4 v-text="msg2"></h4>
        <input type="button" :value="but+'按钮'" v-bind:title="myTitle+'123'">
        <input type="button" value="按钮" v-on:click="show">
        <input v-model="msg2">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="停止" @click="stop">

        <!-- <div id="div1" @click="divHandle" >
            <button @click.stop="btnHandle">默认冒泡</button>
        </div> -->
        <a href="http://www.baidu.com/" @click.prevent="linkTo">有事先百度</a>
        <a href="http://www.baidu.com/" @click.prevent.once="linkTo">只触发一次</a>

        <!-- <div id="div1" @click.capture="divHandle" >
            <button @click="btnHandle">默认冒泡</button>
        </div> -->

        <div id="div1" @click.self="divHandle" >
            <button @click="btnHandle">默认冒泡</button>
        </div>



    </div>
    </body>


    <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123',
            msg2: '猥琐发育，别浪~~~',
            myTitle: 'aaaa',
            but: 'bbb',
            intervalId: null
          },
          methods: {
            show:function() {
              alert('Hello')
            },
            lang(){
              if (this.intervalId == null) {
                this.intervalId = setInterval(() => {//箭头函数，内部的this指向外部的this
                  var start= this.msg2.substring(0,1)
                  var end = this.msg2.substring(1)
                  this.msg2 = end+start
                  console.log(this.msg2)
                  }, 400)
              }
              
            },  
            stop() {
              clearInterval(this.intervalId)
              this.intervalId = null
              
            },
            divHandle(){
                console.log('div ......')
            },
            btnHandle(){
                console.log('btn ......')
            },
            linkTo() {
                console.log('有事先百度')
            }
        },


        });
    </script>